
<script setup lang="ts">
const appStore = useAppStore()

export type TitleType = keyof typeof stepTitleList | null

const stepTitleList = {
  error_answer: new URL('@/assets/guide/error_answer.png', import.meta.url).href,
  encourage_1: new URL('@/assets/guide/encourage_1.png', import.meta.url).href,
  encourage_2: new URL('@/assets/guide/encourage_2.png', import.meta.url).href,
  step_1_1: new URL('@/assets/guide/step_1_1.png', import.meta.url).href,
  step_1_2: new URL('@/assets/guide/step_1_2.png', import.meta.url).href,
  step_1_3: new URL('@/assets/guide/step_1_3.png', import.meta.url).href,
  step_2_1: new URL('@/assets/guide/step_2_1.png', import.meta.url).href,
  step_2_2: new URL('@/assets/guide/step_2_2.png', import.meta.url).href,
  step_3_1: new URL('@/assets/guide/step_3_1.png', import.meta.url).href,
  step_3_2: new URL('@/assets/guide/step_3_2.png', import.meta.url).href,
  step_3_3: new URL('@/assets/guide/step_3_3.png', import.meta.url).href,
  step_4_1: new URL('@/assets/guide/step_4_1.png', import.meta.url).href,
  step_4_2: new URL('@/assets/guide/step_4_2.png', import.meta.url).href,
  step_5_1: new URL('@/assets/guide/step_5_1.png', import.meta.url).href,
  step_5_2: new URL('@/assets/guide/step_5_2.png', import.meta.url).href,
  step_5_3: new URL('@/assets/guide/step_5_3.png', import.meta.url).href,
  step_5_4: new URL('@/assets/guide/step_5_4.png', import.meta.url).href,
  step_6_1: new URL('@/assets/guide/step_6_1.png', import.meta.url).href,
  step_6_2: new URL('@/assets/guide/step_6_2.png', import.meta.url).href,
  step_6_3: new URL('@/assets/guide/step_6_3.png', import.meta.url).href,
  step_7_1: new URL('@/assets/guide/step_7_1.png', import.meta.url).href,
  step_7_2: new URL('@/assets/guide/step_7_2.png', import.meta.url).href,
  step_7_3: new URL('@/assets/guide/step_7_3.png', import.meta.url).href,
  step_7_4: new URL('@/assets/guide/step_7_4.png', import.meta.url).href,
  step_7_5: new URL('@/assets/guide/step_7_5.png', import.meta.url).href,
  step_9_1: new URL('@/assets/guide/step_9_1.png', import.meta.url).href,
  step_8_1: new URL('@/assets/guide/step_8_1.png', import.meta.url).href,
  step_8_2: new URL('@/assets/guide/step_8_2.png', import.meta.url).href,
  step_8_3: new URL('@/assets/guide/step_8_3.png', import.meta.url).href,
  step_10_1: new URL('@/assets/guide/step_10_1.png', import.meta.url).href,
  step_10_2: new URL('@/assets/guide/step_10_2.png', import.meta.url).href,
  step_10_3: new URL('@/assets/guide/step_10_3.png', import.meta.url).href,
  step_11_1: new URL('@/assets/guide/step_11_1.png', import.meta.url).href,
  step_11_2: new URL('@/assets/guide/step_11_2.png', import.meta.url).href,
  step_12_1: new URL('@/assets/guide/step_12_1.png', import.meta.url).href,
  step_12_2: new URL('@/assets/guide/step_12_2.png', import.meta.url).href,
  step_13_2: new URL('@/assets/guide/step_13_2.png', import.meta.url).href,
  step_14_1: new URL('@/assets/guide/step_14_1.png', import.meta.url).href,
  step_14_2: new URL('@/assets/guide/step_14_2.png', import.meta.url).href,
  step_15_1: new URL('@/assets/guide/step_15_1.png', import.meta.url).href,
  step_15_2: new URL('@/assets/guide/step_15_2.png', import.meta.url).href,
  step_15_3: new URL('@/assets/guide/step_15_3.png', import.meta.url).href,
  step_15_4: new URL('@/assets/guide/step_15_4.png', import.meta.url).href,
  step_15_5: new URL('@/assets/guide/step_15_5.png', import.meta.url).href,
  step_15_6: new URL('@/assets/guide/step_15_6.png', import.meta.url).href,
  step_16_1: new URL('@/assets/guide/step_16_1.png', import.meta.url).href,
  step_16_2: new URL('@/assets/guide/step_16_2.png', import.meta.url).href,
  step_17_2: new URL('@/assets/guide/step_17_2.png', import.meta.url).href,
  step_18_2: new URL('@/assets/guide/step_18_2.png', import.meta.url).href,
  step_19_2: new URL('@/assets/guide/step_19_2.png', import.meta.url).href,
  step_20_1: new URL('@/assets/guide/step_20_1.png', import.meta.url).href,
  step_20_2: new URL('@/assets/guide/step_20_2.png', import.meta.url).href,
  step_20_3: new URL('@/assets/guide/step_20_3.png', import.meta.url).href,
  step_21_1: new URL('@/assets/guide/step_21_1.png', import.meta.url).href,
  step_21_2: new URL('@/assets/guide/step_21_2.png', import.meta.url).href,
  step_22_1: new URL('@/assets/guide/step_22_1.png', import.meta.url).href,
  step_22_2: new URL('@/assets/guide/step_22_2.png', import.meta.url).href,
  step_24_1: new URL('@/assets/guide/step_24_1.png', import.meta.url).href,
  step_24_2: new URL('@/assets/guide/step_24_2.png', import.meta.url).href,
  step_25_1: new URL('@/assets/guide/step_25_1.png', import.meta.url).href,
  step_25_2: new URL('@/assets/guide/step_25_2.png', import.meta.url).href,
  step_25_3: new URL('@/assets/guide/step_25_3.png', import.meta.url).href,
  step_25_4: new URL('@/assets/guide/step_25_4.png', import.meta.url).href,
}

</script>

<template>
  <div v-if="appStore.globalTip || appStore.prevEndTip"
    class="globalTip  backdrop-blur-sm  flex-center z-999999999 bg-#0009">
    <img v-if="appStore.prevEndTip" id="prevEndTip" :src="stepTitleList[appStore.prevEndTip]" class="op-0 absolute">
    <img v-if="appStore.globalTip" id="globalTip" :src="stepTitleList[appStore.globalTip]" class="op-0 absolute ">
  </div>
</template>
<style  lang="scss" scoped>
@media screen and (min-width:440px) {
  .globalTip {
    width: 400px;
    height: 100%;
    position: fixed;
    z-index: 999999999;
    align-items: center;
  }
}

@media screen and (max-width:440px) {
  .globalTip {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999999999;
    align-items: center;
  }
}
</style>